{extend name="layout/layout" /}


{block name="style"}
	<style>
		.confirm-order{
			margin-bottom: 50px;
		}
		.address{
			background: #fff;
		}

		.address .mui-row{
			padding: 5px;
		}

		.address-border{
			height: 5px;
			width: 100%;
			background: url('/assets/img/address_border.png') repeat;
		}

		.business{
			margin-top: 8px;
		}

		.business .bus-item{
			margin-bottom: 8px;
			background: #fff;
		}

		.business .bus-item .bus-name{
			line-height: 40px;	
			border-bottom: 1px solid #ddd;
			padding: 0 10px;
		}

		.goods-list{
			background: #fff;
			padding: 5px;
			border-bottom: 1px solid #ddd;
		}

		.goods-list .goods-info{
			padding:0 10px;
		}

		.mui-table-view-cell{
			font-size: 12px;
			/*padding: 6px 10px;*/
		}

		.mui-table-view-cell:after{
			left: 0;
		}

		.mui-table-view-cell input{
			margin: 0;
			border:none;
			font-size: 12px;
			padding:  0;
			height: 28px;
			line-height: 28px;
		}

		.opear{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 45px;
			line-height: 45px;
			background: #fff;
			font-size: 14px;
		}

		.opear .submit-btn{
			background: #e60012;
			color:#fff;
		}

		.total{
			padding: 0 5px;
		}

		.total-freight{
			color:#8f8f94;
		}

		.address-icon{
			text-align: center;
			line-height: 50px;
			color:#8f8f94;
		}

		.inputs{
			background: #fff;
		}

		.inputs .mui-input-row{
			border-bottom: 1px solid #eee;
		}

		.inputs .mui-input-row *{
			font-size: 12px;
		}

		.mui-popover{
			position: fixed;
		}

		.use-point{
			background: #fff;
			padding: 10px;
			margin-top: 8px;
			position: relative;
			padding-right: 50px;
			line-height: 30px;
		}

		.use-point img{
			height: 30px;
			width: 30px;
			position: absolute;
			right: 10px;
			top: 10px;
		}
	</style>
{/block}

{block name="main"}
	<div class="confirm-order" v-cloak>
		<div class="address">
			<div v-if="detail.address" class="mui-row" @tap="selectAddress()">
				<div class="address-icon mui-col-xs-1">
					<i class="mui-icon mui-icon-location"></i>
				</div>
				<div class="address-detail mui-col-xs-10">
					<p>
						收货人：{{detail.address.recipients}}
						<span class="mui-pull-right">
							{{detail.address.mobile}}
						</span>
					</p>
					<p>{{detail.address.province}}{{detail.address.city}}{{detail.address.area}}{{detail.address.address}}</p>
				</div>
				<div class="address-icon mui-col-xs-1">
					<i class="mui-icon mui-icon-arrowright"></i>
				</div>
			</div>

			<a href="/mobile/address/add" class="mui-btn mui-btn-success" v-else>添加收货地址</a>
			<div class="address-border"></div>
		</div>

		



		<div class="business">
			<div class="bus-item" v-for="(item, index) in detail.businessGoods">
				<div class="bus-name">{{item.business_name}}商家</div>
				<div class="goods-list">
					<div class="goods mui-row" v-for="goods in item.products">
						<div class="goods-img mui-col-xs-2">
							<img :src="goods.original_image" class="img-responsive" alt="">
						</div>
						<div class="goods-info mui-col-xs-10">
							<p>{{goods.goods_name}}</p>
							<p v-if="goods.spec_name">{{goods.spec_name}}</p>
							<p>
								<span class="text-theme">￥{{goods.price}} 积分可抵扣{{goods.point}}元</span> 
								<span class="mui-pull-right">x{{goods.number}}</span>
							</p>
						</div>
					</div>
				</div>
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				    	快递运费 <span class="mui-pull-right">￥{{item.freight}}</span>
				    </li>
				    <li class="mui-table-view-cell" v-if="item.coupons.length > 0">
				    	店铺优惠 <span class="mui-pull-right"><a href="#popover" class="text-gray" @tap="coupons = item.coupons; business_index=index">{{item.coupon_text?item.coupon_text:'不使用优惠券'}}</a></span>
				    </li>
				    <li class="mui-table-view-cell">
				    	小计价格 <span class="mui-pull-right text-theme">￥{{item.amount}}</span>
				    </li>
				    <li class="mui-table-view-cell">
				    	<input type="text" v-model="item.message" placeholder="有什么想对商家说的可以写在这里哦~">
				    </li>
				</ul>
			</div>
		</div>

		<div class="use-point" @tap="select_use_point">
			<div class="all-point mui-pull-left">可抵扣积分{{detail.allPoint}}元</div>
			<div class="user-point mui-pull-right">
				可用积分{{detail.user_point}} 
				<img class="img-responsive" :src="usePoint == 1 ? '/assets/img/selected.png' :'/assets/img/she.png'" alt="">
			</div>
			<div class="mui-clearfix"></div>
		</div>

		<div class="inputs" v-if="detail.inputs && detail.inputs.length > 0">
			<div class="mui-input-row" v-for="input in detail.inputs">
		        <label>{{input.name}}</label>
		        <input type="text" v-model="input.value" :placeholder="input.tips">
		    </div>	
		</div>

		<div class="opear mui-row">
			<div class="mui-col-xs-9 total">
				<div class="total-price mui-pull-left">
					合计:
					<span class="text-theme">￥{{orderAmount}} <span v-if="orderPoint > 0">+{{orderPoint}}积分</span></span>
					<!-- <small class="total-freight">(运费：{{detail.freight}})</small> -->
				</div>
				<div class="mui-pull-right">共{{detail.totalNumber}}件商品</div>
			</div>
			<div class="mui-col-xs-3 submit-btn mui-text-center" @tap="createOrder()">
				提交订单
			</div>
			
		</div>

		<div id="popover" class="mui-popover mui-popover-action ">
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell" v-for="coupon in coupons">
		            <a @tap="select_coupon(coupon)" >{{coupon.amount}}元{{coupon.name}}</a>
		        </li>
		    </ul>
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell">
		            <a href="#popover"><b>取消</b></a>
		        </li>
		    </ul>
		</div>

	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>
	
		var detailVue = new Vue({
			el: '.confirm-order',
			data: {
				orderData: '',
				detail:'',
				coupon_text: '选择优惠券',
				coupons: [],
				business_index: '',
				usePoint: 0,
				orderPoint: 0,
			},
			mounted: function(){
				this.orderData = {$data};
				this.getInfo();
				mui.init();
			},
			methods:{
				//获取订单内容
				getInfo: function(){
					layer.open({
						type:2,
						shadeClose: false
					});

					var localAddressId = localStorage.getItem('address_id');
					if(localAddressId){
						this.orderData.address_id = localAddressId;
					}

					var that = this;
					var url =  'order/confirmOrder';
					request(that, {'url': url, 'data': {
					  	"goods_id": that.orderData.goods_id,
					  	"price_id": that.orderData.price_id,
					  	"number": that.orderData.number,
					  	"cart_ids": that.orderData.cart_ids,
					  	"type": that.orderData.type,
					  	"address_id": that.orderData.address_id,
					  	'active_type': that.orderData.active_type,
					}}, function(res){
						if(res.code == 200) {
							layer.closeAll();
							that.detail = res.data;
							that.orderAmount = res.data.orderAmount;
						} else if(res.code == 401){
							location.href = "{:url('user/login')}";
						} else {
							layer.closeAll();
							mui.alert('提示', res.msg, function() {
								mui.back();
    			            });
						}
					},function(error){
						layer.closeAll();
						mui.back();
						mui.toast(error.body.msg);
					});
				},

				//提交生成订单
				createOrder: function(){
					var that = this;

					var bus = this.detail.businessGoods;

					if(that.orderData.type == 'goods') {
						message_str = bus[0]['message']?bus[0]['message']:'';
					} else {
						var message = [];
						bus.forEach(function(item, index){
							if(!item.message) {
								item.message = '';
							}
							message.push(item.business_id+'='+item.message);
						})
						message_str = message.join('&');
					}

					// console.log(message_str);return false;

					var coupons = [];
					bus.forEach(function(item, index){
						if(!item.coupon_id) {
							item.coupon_id = '';
						}
						coupons.push(item.business_id+'='+item.coupon_id);
					})
					var coupons_str = coupons.join('&');
					
					layer.open({
						type:2,
						shadeClose: false
					});

					var input_values = '';
					if(this.detail.inputs.length > 0) {
						this.detail.inputs.forEach(function(item, index) {
							if(index != 0) {
								input_values += '&';	
							}
							item.value = item.value ? item.value : '';
							input_values +=item.id+'='+item.value;
						})
					}

					// console.log(input_values);return;

					var url =  'order/createOrder';
					request(that, {'url': url, 'data': {
					  	"goods_id": that.orderData.goods_id ? that.orderData.goods_id: '',
					  	"price_id": that.orderData.price_id ? that.orderData.price_id: '',
					  	"number": that.orderData.number ? that.orderData.number: '',
					  	"cart_ids": that.orderData.cart_ids ? that.orderData.cart_ids: '',
					  	"type": that.orderData.type,
					  	"address_id": that.detail.address.id,
					  	"message": message_str,
					  	"active_type": that.orderData.active_type ? that.orderData.active_type: '',
					  	"order_group_id": that.orderData.order_group_id ? that.orderData.order_group_id: '',
					  	"input_values": input_values,
					  	"coupons": coupons_str,
					  	"use_point": that.usePoint
					}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							localStorage.removeItem('address_id');
							location.href = '/mobile/order/payorder/type/order/id/'+res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},

				selectAddress: function(){
					localStorage.setItem('confirmOrderUrl', '{$url}');
					location.href = '{:url("address/index",["type" => "select"])}';
				},

				select_coupon: function(coupon) {
					console.log(coupon);
					this.detail.businessGoods[this.business_index]['coupon_id'] = coupon.id;
					this.$set(this.detail.businessGoods[this.business_index], 'coupon_text', coupon.amount+'元'+coupon.name);
					mui('#popover').popover('hide')
				},

				//选择是否使用积分抵扣
				select_use_point: function(){
					if(this.usePoint == 1) {
						this.usePoint = 0;
						this.orderPoint = 0;
						this.orderAmount = this.detail.orderAmount;
					} else {
						var point = this.detail.user_point < this.detail.allPoint? this.detail.user_point: this.detail.allPoint;
						this.usePoint = 1;
						this.orderPoint = point;
						this.orderAmount = this.detail.orderAmount - point;
					}

				}
			}
		});
	</script>
{/block}